<template>
  <div class="notify">
    <!-- 公告标题 -->
    <h3>{{ announcement.title }}</h3>
    <!-- 公告内容 -->
    <div>{{ announcement.content }}</div>

    <!-- 公告发布按钮 -->
    <el-button type="primary" @click="showPopup">发布公告</el-button>
    <!-- 发布公告的弹窗 -->
    <el-dialog title="发布公告" v-model="show">
      <el-form :model="newAnnouncement" @submit.prevent="publish">
        <el-form-item label="标题">
          <el-input v-model="newAnnouncement.title"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="newAnnouncement.content" :rows="2" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">发布</el-button>
          <el-button @click="hidePopup">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    // 使用ref来定义响应式状态
    const announcement = ref({
      title: "系统公告",
      content: "这是一条系统公告，请留意！",
    });

    // 获取路由实例
    const router = useRouter();

    // 发布公告的状态
    const show = ref(false);
    const newAnnouncement = ref({
      title: "",
      content: "",
    });

    // 跳转到公告管理页面
    const gotoAnnouncementList = () => {
      router.push("/announcement-list");
    };

    // 打开发布公告弹窗
    const showPopup = () => {
      show.value = true;
    };

    // 关闭发布公告弹窗
    const hidePopup = () => {
      show.value = false;
    };

    // 发布公告
    const publish = () => {
      announcement.value = {
        title: newAnnouncement.value.title,
        content: newAnnouncement.value.content,
      };
      hidePopup();
    };

    // 返回状态和方法
    return {
      announcement,
      gotoAnnouncementList,
      show,
      newAnnouncement,
      showPopup,
      hidePopup,
      publish,
    };
  },
};
</script>

<style scoped>
.notify {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
.notify h3 {
  margin-top: 0px;
}
.notify button {
  margin-top: 10px;
}
.el-dialog__title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.el-dialog__body + .el-dialog__footer {
  border-top: none;
}
.popup label {
  display: inline-block;
  width: 60px;
}
.popup input[type="text"],
.popup textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.popup button[type="submit"],
.popup button[type="button"],
.popup .el-button[type="primary"],
.popup .el-button[type="default"] {
  margin-top: 10px;
}
</style>
